<template>
  <div class="address">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <el-col :span="17">
            <el-card class="box-card address-body">
              <div slot="header" class="clearfix">
                <span style="font-size:24px;">地址管理</span>
                <el-button type="danger" style="float:right;" @click="addAddress">添加地址</el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="40%"
                  :before-close="closeDialog">
                  <div class="address-content">
                    <el-form ref="addressForm" :model="addressForm" label-width="100px">
                      <el-form-item label="收件人">
                        <el-input v-model="addressForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="手机号">
                        <el-input v-model="addressForm.mobile"></el-input>
                      </el-form-item>
                      <el-form-item label="所在地区">
                        <el-cascader style="width: 100%;"
                                     v-model="addressForm.province"
                                     :options="options"></el-cascader>
                      </el-form-item>
                      <el-form-item label="详细地址">
                        <el-input v-model="addressForm.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等"></el-input>
                      </el-form-item>
                      <el-form-item label="设为默认地址">
                        <el-switch
                          @change="changeDefault"
                          v-model="addressForm.isDefault"
                          active-color="#13ce66"
                          inactive-color="#ddd">
                        </el-switch>
                      </el-form-item>
                    </el-form>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDialog">取 消</el-button>
                    <el-button type="primary" @click="submitDialog">确 定</el-button>
                  </span>
                </el-dialog>
              </div>
              <div v-if="false">
                <el-image :src="src" style="margin-left:258px;margin-top:50px"></el-image>
                <p style="margin-left:308px;font-family:'黑体';font-size:20px">您还没有地址!</p>
              </div>
              <div v-else>
                <el-card class="box-card address-item" v-for="(item,index) in addressList" :key="index">
                  <div slot="header" class="clearfix" style="text-align: right">
                    <el-button style=" padding: 3px ;width: 30px;height: 30px; margin-right: 5px;"
                               type="primary"
                               icon="el-icon-edit" circle @click="updateAddress(item)"></el-button>
                    <el-button style=" padding: 3px ;width: 30px;height: 30px;" type="danger"
                               icon="el-icon-delete" circle @click="deleteAddress(item)"></el-button>
                  </div>
                  <div style="width: 100%">
                    <div class="address-defalut" v-if="item.isDefault">默认地址 <i class="el-icon-circle-check"></i></div>
                    <span><strong>姓名：</strong>{{item.name}}</span><br/>
                    <span><strong>电话：</strong>{{item.mobile}}</span><br/>
                    <span><strong>省份：</strong><el-cascader style="width: 260px;" size="mini" v-model="item.province"
                                                           :options="options"
                                                           disabled></el-cascader></span><br/>
                    <span><strong>地址：</strong>{{item.address}}</span><br/>
                  </div>
                </el-card>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="1">
            <account></account>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import account from "~/pages/account/account.vue";
  import cityCode from "~/assets/address/city_code.json";
  import * as AddressRequest from "../../assets/address/address";
  import topBar from '~/components/topBar.vue'

  export default {
    components: {
      account,
      topBar
    },
    data() {
      return {
        isAddflag: false,
        options: [],
        addressList: [],
        activeId: 0,
        addressForm: {
          name: '',
          mobile: '',
          province: [],
          address: '',
          isDefault: false
        },
        dialogVisible: false,
        src: 'http://theme.opencartdemo.cn/smart-3200-free/catalog/view/theme/default/image/no_items.png'
      };
    },
    methods: {
      async deleteAddress(item) {
        await AddressRequest.deleteAddress(this,item.id)
      },
      async changeDefault(val){
        if (val){
          await AddressRequest.updateDefaultAddress(this)
        }
      },
      addAddress() {
        this.dialogVisible = true
        this.isAddflag = true
      },
      closeDialog() {
        this.addressForm = {
          name: '',
          mobile: '',
          province: [],
          address: '',
          isDefault: false
        };
        this.activeId = 0;
        this.dialogVisible = false;
        this.isAddflag = false;
      },
      async submitDialog() {

        if (this.isAddflag) {
          await AddressRequest.addAddress(this)
        } else {
          await AddressRequest.updateAddress(this)
        }

        this.addressForm = {
          name: '',
          mobile: '',
          province: [],
          address: '',
          isDefault: false
        };
        this.activeId = 0;
        this.dialogVisible = false;
        this.isAddflag = false;
      },
      updateAddress(item) {
        this.dialogVisible = true;
        this.activeId = item.id
        this.addressForm = {
          name: item.name,
          mobile: item.mobile,
          province: item.province,
          address: item.address,
          isDefault: item.isDefault === 1 ? true : false
        };
      }
    },
    mounted() {
      this.options = cityCode
      AddressRequest.getAllAddress(this)
    }
  };
</script>

<style lang="less">
  .address {
    margin-bottom: 30px;

    .address-body {
      min-height: 60vh;
      border-radius: 12px;

      .address-item {
        margin-bottom: 10px;

        .el-card__header {
          padding: 5px 20px;
        }

        .address-defalut {
          text-align: right;

          i {
            color: green;
          }
        }

        .el-input.is-disabled .el-input__inner {
          color: #000;
          background-color: white;
        }
      }
    }
  }
</style>
